* {margin: 0; padding: 0; box-sizing: border-box;}

html {font-size: calc(100vw/7.5); width: 100%; height: 100%; position: fixed; top:0; left:0;}
body {touch-action: none; overflow: hidden; width: 100%; height: 100%; position: fixed; top:0; left:0;}

canvas {width: 100vw; height: 100vh; position: absolute; left: 0; top: 0;}

.loading {position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: #000; z-index: 999; display: -webkit-flex; display: flex; align-items: center; justify-content: center;}
.loading .loading-box .loading-mask-box {width: 3.57rem; height: 1.81rem; position: relative; -webkit-mask-image: url(../img/loading_logo_bg.png); mask-image: url(../img/loading_logo_bg.png); -webkit-mask-size: cover; mask-size: cover; background-color: #2c2c2c;}
.loading .loading-box .loading-mask-box > .mask-move {position: absolute; width: 100%; height: 100%; background-color: #e60000;}
.loading .loading-box p {font-size: 0.36rem; color: #e60000; margin-top: 0.88rem; text-align: center}

.page {height: 100vh; background-image: url("../img/bg.jpg"); background-size: 100%; background-repeat: no-repeat; background-color: #0f0f11;}
.page.index1 {background-image: url("../img/bg1.jpg"); background-size: 100%; background-repeat: no-repeat; background-color: #0f0f11;}
.page .pop-bg {position: fixed; left: 0; right: 0; bottom: 0; top: 0; background-color: rgba(0,0,0,.5); z-index: 998; display: none;}
.page .pop-bg1 {position: fixed; left: 0; right: 0; bottom: 0; top: 0; background-color: rgba(0,0,0,.5); z-index: 9998; display: none;}
#rule {z-index: 999;}
#rank {z-index: 999;}

.car-box {position: absolute; z-index: 9; width: 2.4rem; height: 3rem; bottom: 0.2rem; left: 50%; margin-left: -1.2rem;}
.car-box .jiasu,.car-box .jiansu,.car-box .jiasu1,.car-box .jiasu2,.car-box .jiansu-fire {position: absolute; width: 100%; left: 0; display: none;}
.car-box .jiasu2 {top: 2.1rem;}
.car-box .jiansu-fire {z-index: -1; left: -.5rem; top: -.3rem; width: 150%;}
.game {position: relative; z-index: 99; display: none;}
.game.scene-one {background-image: url("../img/bg1-1.jpg"); background-color: #487814; background-size: 100%; background-repeat: repeat-x;}
.game.scene-one > .sky {background-image: url("../img/bg1-3.jpg"); background-color: #3362ba; background-repeat: no-repeat; background-size: 100%; background-position: center bottom;}
.game.scene-two {background-image: url("../img/bg2-1.jpg"); background-color: #c66f35; background-size: 100%; background-repeat: repeat-x;}
.game.scene-two > .sky {background-image: url("../img/bg2-3.jpg"); background-color: #16a9dc; background-repeat: no-repeat; background-size: 100%; background-position: center bottom;}
.game.scene-three {background-image: url("../img/bg3-1.jpg"); background-color: #f8fbfd; background-size: 100%; background-repeat: repeat-x;}
.game.scene-three > .sky {background-image: url("../img/bg3-3.jpg"); background-color: #2d69a8; background-repeat: no-repeat; background-size: 100%; background-position: center bottom;}
.game .bg-move-box {position: absolute; width: 100%; height: 100vh; top: 0; left: 0;}
.game .road-move-box {position: absolute; width: 100%; height: 100vh; top:0; left: 0; z-index: 3; background-image: url("../img/lu.png"); background-size: 100%;}
.game .road-move-box.move {background-image: url("../img/lu.gif"); background-size: 100%;}
.game .sky {width: 200vw; height: 30vh; position: absolute; top: 0; left: 50%; margin-left: -100vw; overflow: hidden;}
.game .ground {width: 200vw; height: 70vh; position: absolute; bottom: 0; left: 50%; margin-left: -100vw; overflow: hidden;}
.game .bg-move-box > img {margin-bottom: .5rem; display: none;}
.game .road-move-box > .road-move {position: absolute; width: .5rem; top: -3%; left: 50%; margin-left: -.22rem; z-index: 3; display: none;}
.game .road {position: relative; z-index: 2;}
.game .game-info-box {position: absolute; width: 5.21rem; height: 2.47rem; background-image: url("../img/game_info_bg.png"); background-size: 100%; background-repeat: no-repeat; left: 0; top: .76rem; transform-origin: left center; -webkit-transform-origin: left center; transform: scale(1.2); -webkit-transform: scale(1.2);}
.game .game-info-box .timer-meter-box {position: absolute; left: 2.05rem; top: .65rem; color: #78ff00; font-size: 0.36rem; font-weight: bold; width: .65rem; text-align: center;}
.game .game-info-box .kilometre-meter-box {position: absolute; left: 3.1rem; top: .85rem; width: 1.7rem; height: 0.36rem; text-align: right; padding-right: 0.3rem; color: #fff000; font-size: 0.36rem; font-weight: bolder; font-family: 'microsoft yahei';}
.game .game-info-box .speed-meter-box {position: absolute; width: 0.06rem; height: 0.71rem; left: 1rem; top: 0.65rem; -webkit-transform-origin: 50% 90%; transform-origin: 50% 90%; -webkit-transform: rotate(-120deg); transform: rotate(-120deg);}
.game .game-info-box .speed-meter-box > img {display: block;}
.game .game-pause {position: absolute; z-index: 9; width: 1.49rem; right: 0.23rem; top: 4.4rem;}
.game .road-add {position: absolute; width: 100%; left: 0; top: -10%; z-index: 4; display: none;}
.game .game-item {position: absolute; width: 1.52rem; top: 0; z-index: 5; display: none;}
.game .pass {position: absolute; width: 100%; left: 0; top: 35%; z-index: 6; display: none;}
.game .longer {position: absolute; width: 100%; left: 0; bottom: 3rem; z-index: 6; display: none;}


.page .slogan {position: absolute; width: 5.92rem; top: -.1rem; right: .7rem;}
.page .game-info {position: absolute; width: 2.99rem; bottom: 4.1rem; right: 0.3rem;}
.page .game-level-choose-box {display: -webkit-flex; display: flex; justify-content: space-between; width: 100%; position: absolute; bottom: 1rem; left: 0;}
.page .game-level-choose-box .game-level-item {flex: 1; position: relative; height: 2.87rem; display: -webkit-flex; display: flex; align-items: center;}
.page .game-level-choose-box .game-level-item .game-top-box {position: absolute; width: 1.86rem; height: .7rem; background-image: url("../img/top_box_bg.png"); background-size: 100%; background-repeat: no-repeat; left: 23%; padding-left: .33rem; color: #fff; font-size: .24rem; bottom: .4rem; padding-top: .05rem;}
.page .game-level-choose-box .game-level-item:nth-child(2) .game-top-box {left: 10%;}
.page .game-level-choose-box .game-level-item:nth-child(3) .game-top-box {left: -1%;}
.page .game-level-choose-box .game-level-item .game-level-choose-img {width: 3.22rem; position: absolute; left: 0; top: 0;}
.page .game-level-choose-box .game-level-item:nth-child(2) .game-level-choose-img {left: -0.35rem;}
.page .game-level-choose-box .game-level-item:nth-child(3) .game-level-choose-img {left: -0.7rem;}
.page .game-level-choose-box .game-level-item .level-name-icon {position: absolute; width: .82rem; top: -0.3rem; left: .85rem; z-index: 2;}
.page .game-level-choose-box .game-level-item:nth-child(2) .level-name-icon {left: .5rem;}
.page .game-level-choose-box .game-level-item:nth-child(3) .level-name-icon {left: .15rem;}
.page .game-level-choose-box .game-level-item p {position: relative; z-index: 1; width: 100%; line-height: .36rem; font-size: .28rem; text-align: center; padding-left: .6rem; font-weight: bold;}
.page .game-level-choose-box .game-level-item:nth-child(2) p {padding-left: 0;}
.page .game-level-choose-box .game-level-item:nth-child(3) p {padding-left: 0; margin-left: -.3rem;}
.page .bottom-btn {position: absolute; left: 0; width: 100%; bottom: 0.02rem; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center;}
.page .bottom-btn > img {width: 2.17rem; height: 1.1rem;}
.page .bottom-btn > a {color: #fff; text-decoration: underline; font-size: 0.3rem; font-weight: bold;}
.page .bottom-btn > a > img {width: .32rem; position: relative; top: .05rem; margin-right: 0.1rem;}
.page .pop-box {position: absolute; width: 7rem; background-image: url("../img/pop_box_bg.png"); background-size: 100% 100%; background-repeat: no-repeat; z-index: 999; left: 0.25rem; top: 1.75rem;}
.page .pop-box.no-close {background-image: url("../img/pop_box_bg3.png"); background-size: 100% 100%; background-repeat: no-repeat;}
.page .pop-box.game-over {background-image: url("../img/pop_box_bg1.png"); height: 6.6rem; background-size: 100% 100%; background-repeat: no-repeat; top: 1rem;}
.page .pop-box.game-over .share-btn {width: 4.38rem; position: absolute; bottom: -.4rem; left: 50%; margin-left: -2.2rem;}
.page .pop-box.wrong {background-image: url("../img/pop_box_bg2.png"); height: 4.83rem; background-size: 100%; background-repeat: no-repeat;}
.page .pop-box.rank:before {content: ''; position: absolute; width: 100%; left: 0.16rem; top: 0.15rem; background-image: url("../img/rank_head_bg.png"); background-size: 100%; background-repeat: no-repeat; width: 6.69rem; height: 1.95rem;}
.page .pop-box .pop-box-close {position: absolute; width: .27rem; height: .27rem; top: 0.45rem; right: 0.4rem; z-index: 3;}
.page .pop-box .pop-box-head {text-align: center; position: relative; z-index: 2; margin-top: -0.8rem; height: 1.8rem;}
.page .pop-box .pop-box-head > img {width: 2.8rem;}
.page .pop-box .pop-box-head.guide {height: .49rem; margin-top: 0; padding-top: 1rem;}
.page .pop-box .pop-box-head.guide > img {width: 4.28rem; display: block; margin: 0 auto;}
.page .pop-box .pop-box-content {padding: 0 0.2rem; position: relative;}
.page .pop-box .pop-box-content.guide {margin: 1rem 0 0.3rem;text-align: center; max-height: 65vh; overflow: auto;}
.page .pop-box .pop-box-content.guide p {font-size: .32rem; line-height: .46rem; padding: 0 .53rem;}
.page .pop-box .pop-box-content.guide p span {position: static;}
.page .pop-box .pop-box-content.guide .red {color: #ff0101;}
.page .pop-box .pop-box-content.guide > img {width: 3rem; display: block; margin: .1rem auto .2rem;}
.page .pop-box .pop-box-content input[type='text'] {width: 80%; height: .8rem; line-height: .8rem; border: none; padding: 0 .2rem; border-radius: .1rem; background-color: #fff;}
.page .pop-box button {width: 80%; margin: 0 auto; display: block; margin-bottom: .5rem; height: .8rem; font-size: .3rem; border-radius: .1rem; border: #fff 2px solid; background: #000; color: #fff;}
.page .pop-box.rank .pop-box-content {padding-bottom: 0.3rem;}
.page .pop-box .pop-box-content.rule {padding: 0.1rem 0.54rem 0.3rem;}
.page .pop-box .pop-box-content .my-rank-box {display: -webkit-flex; display: flex; padding: 0 0.3rem; height: 1rem; align-items: center; justify-content: space-between;}
.page .pop-box .pop-box-content .rank-num {font-size: .4rem; color: #f00; width: .5rem; text-align: center;}
.page .pop-box .pop-box-content .rank-num > img {width: 0.5rem;}
.page .pop-box .pop-box-content .rank-acc {width: .95rem; margin: 0 0.25rem;}
.page .pop-box .pop-box-content .rank-name {font-size: 0.3rem; color: #fff; width: 2.5rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.page .pop-box .pop-box-content .rank-score {font-size: 0.3rem; color: #f00; flex: 1; text-align: right;}
.page .pop-box .pop-box-content .rank-list-box {padding: 0 0.3rem; height: 5.5rem; overflow: auto;}
.page .pop-box .pop-box-content .rank-list-box ul li {border-bottom: rgba(255,255,255,.1) 1px solid; padding: 0.17rem 0; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between;}
.page .pop-box .pop-box-content .rank-list-box ul li .rank-num,.page .pop-box .pop-box-content .rank-list-box ul li .rank-score {color: #fff;}
.page .pop-box .pop-box-content p {color: #fff; font-size: 0.24rem; margin-bottom: 0.2rem; line-height: 0.3rem; padding-left: 0.53rem; position: relative;}
.page .pop-box .pop-box-content p span {position: absolute; left: 0;}
.page .pop-box .pop-box-content p.tips {text-align: right; font-size: 0.16rem;}
.page .pop-box-tips {position: absolute; width: 100%; left: 0; top: 9.5rem; text-align: center; color: #fff; font-size: 0.24rem; font-weight: bold;}
.page .share-box {position: absolute; background-color: #0f0f11; z-index: 9999; width: 100%; height: 100vh; text-align: right; top: 0; left: 0; display: none;}
/*.page .share-box > img {width: 4.98rem;}*/
.page .share-box img {display: block;}
.page .share-box .qr-code {position: absolute; width: 1.3rem; top: .35rem; left: 4.32rem; -webkit-transform: rotate(-15deg); transform: rotate(-15deg);}
.page .share-box .qr-code1 {position: absolute; width: 1.3rem; top: 7.45rem; left: 3.25rem;}
.page .share-box .share-tips {position: absolute; width: 100%; color: #fff; text-align: center; font-size: .24rem; bottom: 1.5rem;}
.page .share-box .share-name {position: absolute; width: 100%; top: 8.2rem; display: -webkit-flex; display: flex; align-items: center; justify-content: center;}
.page .share-box .share-name.other {justify-content: flex-start; top: 7.6rem;}
.page .share-box .share-name > div {font-size: .32rem; color: #fff; text-align: left;}
.page .share-box .share-name.other > div {font-size: .24rem;}
.page .share-box .share-name > .share-img-box {display: -webkit-flex; display: flex; align-items: center; justify-content: center; margin: 0 .3rem; box-shadow: 0 0 .38rem rgba(255,0,0,.48); position: relative;}
.page .share-box .share-name > .share-img-box > img {width: 1rem; height: 1rem; border-radius: 50%; overflow: hidden; border: #fff 1px solid;}
.page .share-box .share-name > .share-img-box .icon {position: absolute; width: .5rem; height: .4rem; left: 50%; margin-left: -.25rem; bottom: -.2rem; border: none; border-radius: 0;}
.page .share-box .back-index {position:absolute; width: 30%; left: 35%; bottom: .3rem;}


.page .pop-box .pop-box-content .game-acc-show {text-align: center; margin-top: .1rem;}
.page .pop-box .pop-box-content .game-acc-show > img {width: 2rem;}
.page .pop-box .pop-box-content .game-title-show {text-align: center; font-size: 0.3rem; color: #fff; margin-top: -.5rem; font-weight: bold;}
.page .pop-box .pop-box-content .game-score-show {text-align: center; color: #fff; font-size: 0.3rem; font-weight: bold;}
.page .pop-box .pop-box-content .game-score-show strong {font-weight: bolder; font-size: 0.48rem; color: #f00;}
.page .pop-box .pop-box-content .game-score-show span {color: #f00;}
.page .pop-box .pop-box-content .game-tips-show {margin-top: -0.1rem; height: 0.64rem; display: -webkit-flex; display: flex; align-items: center; justify-content: center;}
.page .pop-box .pop-box-content .game-tips-show p {font-size: 0.22rem; color: #fff; padding-left: 0; margin-bottom: 0;}
.page .pop-box .pop-box-content .game-redbag-box {text-align: center;}
.page .pop-box .pop-box-content .game-redbag-box > img {width: 3.3rem;}
.page .pop-box .pop-box-content .game-redbag-box > p {font-size: 0.18rem; color: #fff; font-weight: lighter; padding-left: 0; margin-bottom: 0; margin-top: -0.4rem;}
.page .pop-box .pop-box-content .redbag-info-box {text-align: center; font-size: 0.3rem; font-weight: bold;}
.page .pop-box .pop-box-content .redbag-info-box p {padding-left: 0; margin-bottom: 0; line-height: 0.55rem;}
.page .pop-box .pop-box-content .redbag-info-box span {color: #f00; position: static;}
.page .pop-box .pop-box-content .redbag-item-box {text-align: center; padding: 0.2rem 0; height: 5.47rem;}
.page .pop-box .pop-box-content .redbag-item-box.bg {background-image: url("../img/redbag_img_bg.png"); height: 6.5rem; background-size: 3.18rem; background-position: top center; background-repeat: no-repeat;}
.page .pop-box .pop-box-content .redbag-item-box > img {width: 3rem;}
.page .pop-box .follow {position: absolute; width: 3.3rem; bottom: 0; left: 50%; margin-left: -1.65rem; margin-bottom: -0.35rem;}
.page .pop-box .pop-box-content .redbag-item-box .redbag-get-info {display: none;}
.page .pop-box .pop-box-content .redbag-item-box .redbag-get-info .redbag-price {color: #f00; font-size: 0.3rem; font-weight: bold; line-height: 0.7rem;}
.page .pop-box .pop-box-content .redbag-item-box .redbag-get-info .redbag-price span {font-size: 0.48rem;}
.page .pop-box .pop-box-content .redbag-item-box .redbag-get-info > p {color: #9f633b; font-size: 0.18rem; line-height: 0.24rem; padding-left: 0;}
.page .pop-box .pop-box-content .redbag-item-box .redbag-get-info#lose {padding-top: 0.4rem;}
.page .pop-box .pop-box-content .redbag-item-box .redbag-get-info#lose > p {font-size: 0.26rem; line-height: 0.36rem;}
.page .pop-box .pop-box-content .sorry-box {text-align: center; color: #fff; font-size: 0.36rem; padding: 1.6rem 0;}
.page .pop-box .pop-box-content .sorry-box h1 {font-size: 0.48rem; margin-bottom: 0.38rem;}
.page .pop-box .pop-box-content .sorry-box p {padding-left: 0;}

.page .pop-box .win-list-box {padding: 0 0.34rem;}
.page .pop-box .win-list-box li {display: -webkit-flex; display: flex; padding: 0.55rem 0; border-bottom: rgba(255,255,255,.1) 1px solid; align-items: center; justify-content: space-between;}
.page .pop-box .win-list-box li .win-list-gift {color: #f00; font-size: 0.24rem; flex: 1;}
.page .pop-box .win-list-box li .win-list-gift strong {font-size: 0.3rem;}
.page .pop-box .win-list-box li .win-list-name {color: #fff; font-size: 0.3rem; width: 2rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.page .pop-box .list-tips-box {text-align: center; font-size: 0.28rem; line-height: 0.48rem; padding: 0.6rem 0;}
.page .pop-box .list-tips-box p {padding-left: 0;}

.page .game-into-box {position: absolute; width: 7rem; left: .25rem; top: 1.5rem; z-index: 9999; display: none;}
.page .game-into-box .back-index {position:absolute; width: 50%; text-align: center; left: 0; bottom: 0; margin-bottom: -.4rem;}
.page .game-into-box .game-start {position:absolute; width: 50%; text-align: center; right: 0; bottom: 0; margin-bottom: -.4rem;}
.page .game-into-box div > img {width: 2.5rem;}
.page .timer {position: absolute; left: 50%; width: 1.6rem; margin-left: -.8rem; top: 3rem; display: none;}

.page .game-start-timer {position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,.5); z-index: 998; display: none;}
.page .game-start-timer img {position: absolute; width: 4rem; top: 50%; left: 50%; margin-top: -2rem; margin-left: -2rem; z-index: 999;}

.page .left-btn {position: absolute; width: 2rem; height: 2rem; left: 0; bottom: 0; background-image: url("../img/left_btn_img.png"); background-size: 1.4rem 1.4rem; background-position: center center; background-repeat: no-repeat; z-index: 99;}
.page .left-btn.on {background-image: url("../img/left_btn_img_on.png"); background-size: 1.4rem 1.4rem;}
.page .right-btn {position: absolute; width: 2rem; height: 2rem; right: 0; bottom: 0; background-image: url("../img/right_btn_img.png"); background-size: 1.4rem 1.4rem; background-position: center center; background-repeat: no-repeat; z-index: 99;}
.page .right-btn.on {background-image: url("../img/right_btn_img_on.png"); background-size: 1.4rem 1.4rem;}

